import React, { Suspense } from "react";
import Child2 from "./child2";
import styles from "./index.module.less";
import BackHomeBtn from "../../components/backHome";

export const Loading = () => {
  return <div>Loading</div>;
};

const SuspenseBox = () => {
  const Child = React.lazy(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(import("./child"));
      }, 1000);
    });
  });

  return (
    <div>
      <div className={styles.btnBox}>
        <BackHomeBtn />
      </div>
      <Suspense fallback={<Loading />}>
        <Child />
      </Suspense>
      <Child2 />
    </div>
  );
};

export default SuspenseBox;
